var arrowKeys = ['←', '↑', '↓', '→'];
var keyBindings = ['h', 'j', 'k', 'l'];
var controlPanel = $('<div>').addClass('control-panel');

$.each(arrowKeys, function(index, arrow) {
  var button = $('<button>').html(arrow);
  button.on('click', function() {
    handleArrowPress(keyBindings[index]);
  });
  controlPanel.append(button);
});

controlPanel.css({
  'position': 'fixed',
  'bottom': '20px',
  'left': '50%',
  'transform': 'translateX(-50%)',
  'background-color': '#f1f1f1',
  'padding': '10px',
  'border-radius': '5px'
});

$('body').append(controlPanel);

$(document).on('keypress', function(event) {
  var key = String.fromCharCode(event.which);
  if (keyBindings.indexOf(key) !== -1) {
    handleArrowPress(key);
  }
});

function handleArrowPress(key) {
  // 在这里添加键按下后的响应逻辑
  console.log('键：%s 被按下', key);
}
